<template>
  <div class="patient-reported-right-form-invalid">
    <template v-if="implicated && implicated.length > 0">
      <div>
        <p v-for="(item, index) in implicated" :key="index">{{ item }}</p>
      </div>
      <div class="btn">
        <el-button type="primary" :size="size" @click="$emit('close')"
          >取消</el-button
        >
        <el-button :size="size" @click="$emit('update:implicated', null)"
          >继续</el-button
        >
      </div>
    </template>
    <template v-else>
      <div>
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="180px"
        >
          <el-form-item v-if="type === '激活'" label="是否保留已录入的数据:" prop="activeType">
            <el-radio-group v-model="ruleForm.activeType">
              <el-radio label="1">是</el-radio>
              <el-radio label="0">否</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item :label="label" prop="annotation">
            <el-input
              :clearable="true"
              v-model="ruleForm.annotation"
              :size="size"
              style="width: 80%;"
              placeholder=""
            />
          </el-form-item>
        </el-form>
      </div>
      <div class="btn">
        <el-button
          type="primary"
          :disabled="!ruleForm.annotation"
          :size="size"
          @click="handleSubmit('ruleForm')"
          >确定</el-button
        >
      </div>
    </template>
  </div>
</template>

<script>
import { mapState, mapGetters, mapMutations, mapActions } from "vuex";
export default {
  props: {
    size: {
      type: String,
      default: "mini"
    },
    type: {
      type: String
    },
    implicated: {
      type: Array
    },
    tableStatus: {
      type: Object
    },
    tableFieldList: {
      type: Array
    },
    showEvents: {
      type: Array
    },
    invalidParams: {
      type: Object
    },
  },
  data() {
    return {
      label: '',
      ruleForm: {
        annotation: '',
        activeType:''
      },
      rules: {
        annotation: [{ required: true, message: "请输入", trigger: "blur" }],
        activeType: [{ required: true, message: "请选择", trigger: "change" }]
      }
    };
  },
  computed: {
    ...mapState({
      subjectInfo: state => state.patientReported.subjectInfo,
      visit: state => state.patientReported.visit,
      table: state => state.patientReported.table
    }),
  },
  watch: {
    type: {
      handler: function (val) {
        this.label = val + '原因：'
      },
      immediate: true
    }
  },
  methods: {
    ...mapActions('eCRFDetail', ['updateTableStatus','invalidTable']),
    ...mapMutations({
      upgrade: "treatment/upgrade"
    }),
    handleSubmit(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          const { annotation, activeType } = this.ruleForm
          const params = {
            id: this.tableStatus&&this.tableStatus.formDataId,
            statusType: '3',
            content: annotation,
            activeType,
            roleId: localStorage.getItem('roleId')
          }
          if (this.type === "失效") {
            this.invalid(params)
          } else {
            params.status = '1';
            this.handleOperate(params);
          }
         
        }
      });
    },
    handleOperate(params) {
      this.updateTableStatus({params})
        .then(res => {
          const { code } = res;
          if (code === 200) {
            this.$emit('close');
            this.upgrade();
            this.$message.success("操作成功！");
          }
        })
        .catch(error => {
          this.$message.error(error);
        })
    },
    invalid (params) {
      const data = {
        ...params,
        ...this.invalidParams
      }
      this.invalidTable({data})
        .then(res => {
          const { code } = res;
          if (code === 200) {
            this.$emit('close');
            this.upgrade();
            this.$message.success("操作成功！");
          }
        })
        .catch(error => {
          this.$message.error(error);
        })
    }
  }
};
</script>

<style lang="scss" scoped>
.btn {
      margin: 1rem ;
      text-align: right;
    }
.el-button--primary.is-disabled,
.el-button--primary.is-disabled:active,
.el-button--primary.is-disabled:focus,
.el-button--primary.is-disabled:hover {
  color: #fff;
  background-color: #85a2d9;
  border-color: #85a2d9;
}
.el-button--primary {
  color: #fff;
  background-color: #753cca;
  border: 1px solid #dcdfe6;
  border-color: #753cca;
}
.patient-reported-right-form-invalid {
  >>> {
    .el-form-item__label {
      font-size: 0.75rem;
    }
    .el-button--primary {
      background-color: #753cca;
      border-color: #753cca;
    }
    .btn {
      margin: 1rem 0;
      text-align: right;
    }
  }
}
</style>
